<script setup lang="ts">
import { inject, provide, ref } from 'vue'

import { EnumScanStatus, NormalScanSeries, scanSeriesType } from '@renderer/views/multiScanSeriesPage/types'
import { useScanStore } from '@renderer/store/pinia/scan'
import { ChooseScanType } from '@renderer/views/multiScanSeriesPage/helper/types'
import { initBallsPosition } from '@renderer/views/multiScanSeriesPage/helper/helper'
import ProtocalTableAndDetail from '@renderer/views/multiScanSeriesPage/modal/components/ProtocalTableAndDetail.vue'


const activePersonType = ref('adult')
const activeScanType = ref<ChooseScanType>(ChooseScanType.fault)
const activePart = ref('head')
const activeProtocolRef = ref({
  activeProtocolId: '',
  params: {},
  keywords: ''
})
const { positionsRef, protocolDetails } = inject('protocolsInfo') as any
provide('protocols', {
  activePersonType: activePersonType,
  activeScanType: activeScanType,
  activePart: activePart,
  activeProtocolRef: activeProtocolRef,
  positionsRef,
  protocolDetails
})

const {
  scanSeriesArr,
  addScanSeriesDialogVisible,
  activeScanSeries
} = inject('multiSeries') as any
const handleClose = () => {
  addScanSeriesDialogVisible.value = false
}

const scanStore = useScanStore()

const changePersonType = (val) => {
  activePersonType.value = val
  activeProtocolRef.value.activeProtocolId = ''
}

const changeActiveScanPart = (val) => {
  activePart.value = val
  activeProtocolRef.value.activeProtocolId = ''
}

const changeActiveScanType = (val:any) => {
  activeScanType.value = (val.toString() as ChooseScanType)
  activeProtocolRef.value.activeProtocolId = ''
}

const handleConfirm = () => {
  if (activeProtocolRef.value.activeProtocolId !== '') {
    addScanSeriesDialogVisible.value = false
    addNewSeries()
  }
}

const addNewSeries = () => {
  let ballsInfo = {}
  const params = JSON.parse(JSON.stringify(activeProtocolRef.value.params))
  let hasScoutImage = false
  let status: EnumScanStatus
  const recentScoutSeries = scanStore.scanSeriesInfo.getRecentScoutSeries()
  if (recentScoutSeries.hasScoutImage) {
    status = EnumScanStatus.c_fit
    hasScoutImage = true
    // todo 这里要根据实际的扫描区域设置。
    const { points, centerOp } = initBallsPosition()
    recentScoutSeries?.imageIds.forEach((imageId, _) => {
      ballsInfo[imageId] = {
        points: structuredClone(points),
        centerOp:structuredClone(centerOp)
      }
    })
  } else {
    status = EnumScanStatus.c_not_fit
  }


  const series = new NormalScanSeries({
    scanSeriesName: `序列:${scanSeriesArr.length + 1}`,
    scanType: activeScanType.value as ChooseScanType,
    keywords: {
      'kV': params['kV'],
      'mA': params['mA']
    },
    params,
    hasScoutImage: hasScoutImage,
    hasImage: false,
    scoutCount: recentScoutSeries?.scoutCount || 0,
    ballsInfo: ballsInfo,
    status,
    imageIds: recentScoutSeries.imageIds
  })
  scanStore.scanSeriesInfo.appendScanSeries(series)
  if (recentScoutSeries) {
    scanStore.relate2ScanSeries(recentScoutSeries.id, series.id)
  }
}

</script>

<template>
  <el-dialog
    v-model="addScanSeriesDialogVisible"
    title="添加扫描序列"
    width="900"
    top="5vh"
    :before-close="handleClose"
  >
    <div class="w-full h-[500px] flex">
      <div class="w-[300px] h-full border flex">
        <div class="flex-1">
          <el-tabs
            v-model="activePersonType"
            type="card"
            @tab-click="changePersonType"
          >
            <el-tab-pane label="Adult" name="adult">
              <img src="@renderer/assets/imgs/adult.png" alt="" />
            </el-tab-pane>
            <el-tab-pane label="Child" name="child">
              <img src="@renderer/assets/imgs/child.png" alt="" />
            </el-tab-pane>
          </el-tabs>

        </div>
        <div class="flex-1 flex flex-col p-[10px] justify-center">
          <div v-for="item in positionsRef[activePersonType]"
               class="flex-1 max-h-[50px] border"
               :class="activePart === item.name ? 'bg-active': ''"
               @click="changeActiveScanPart(item.name)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="flex-1">

        <el-tabs
          v-model="activeScanType"
          type="card"
          @tab-click="changeActiveScanType"
        >
          <el-tab-pane label="Helical" name="helical">
                        <protocal-table-and-detail />
          </el-tab-pane>
          <el-tab-pane label="Fault" name="fault">
                        <protocal-table-and-detail />
          </el-tab-pane>

        </el-tabs>

      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button :disabled="activeProtocolRef.activeProtocolId === ''" type="primary" @click="handleConfirm">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
